<div
  [ngClass]="{
    'lv-cascader-option-item': true,
    'lv-cascader-option-item-disabled': lvData.disabled,
    'lv-cascader-option-item-active': lvActive
  }"
  (click)="!lvData.disabled && (isLeaf ? clickLeaf() : clickItem())"
>
  <ng-container *ngIf="multiple; else contentTpl">
    <label
      lv-checkbox
      class="lv-cascader-option-checkbox"
      [ngModel]="selected && !indeterminate"
      [lvIndeterminate]="indeterminate"
      [lvDisabled]="lvData.disabled"
      (click)="!lvData.disabled && clickCheckBox()"
    ></label>
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
  </ng-container>

  <!-- 单选 -->
  <ng-template #contentTpl>
    <div class="lv-cascader-option-label" lv-overflow>
      <ng-container
        *ngTemplateOutlet="lvItemTemplate || defaultItemTpl; context: { $implicit: lvData, label: lvData.label, index: lvIndex }"
      ></ng-container>
    </div>
    <div *ngIf="!isLeaf" class="lv-cascader-option-icon">
      <i *ngIf="!lvData.loading" lv-icon="lv-icon-list-fold"></i>

      <div *ngIf="lvData.loading" class="lv-cascader-loading">
        <img src="{{assetsPrefixPath}}assets/webp/gray.png" alt="icon-loading" class="lv-icon-loading" />
      </div>
    </div>
  </ng-template>
</div>

<ng-template #defaultItemTpl let-label="label">
  <span>{{ label }}</span>
</ng-template>
